<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title>内蒙古汉纳公司</title>
</head>
<link rel="stylesheet" href="__PUBLIC__/css/amazeui.css"/>
<link rel="stylesheet" href="__PUBLIC__/css/mobeil.css"/>
<link rel="stylesheet" href="__PUBLIC__/css/swiper.css"/>

<script src="__PUBLIC__/js/jquery.min.js"></script>
<script src="__PUBLIC__/js/amazeui.js"></script>
<script src="__PUBLIC__/js/swiper.js"></script>
<script src="__PUBLIC__/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="__PUBLIC__/js/axios.min.js"></script>


<style type="text/css">

html, body {
	/*height: 100%;*/
}

.clear-margin-padding {
	margin: 0;
	padding: 0;
}

.text-line {
  border-top: 1px solid #909090; 
  width: 12rem; 
  display: inline-block; 
  vertical-align: 5px;
}

.sub-title-div {
  text-align: center;
}

.sub-title-text {
  font-size: 5rem;
  color: #00A0EA;
}

.sub-title-text-eng {
  font-size: 3rem;
  color: #909090;
}
</style>
<style type="text/css">

.swiper-container {
  	width: 100%;
  	height: 38rem;
}
.swiper-slide {
	background-position: center;
	background-size: cover;
}

.swiper-pagination-bullet {
	width: 24px;
	height: 24px;
}


.aboutus-div {
	margin-top: 1rem;
	width: 98%;
	margin-left: auto;
	margin-right: auto;
}

.product-div {
	width: 98%;
	font-size: 4rem;
	margin-left: auto;
	margin-right: auto;
	padding: 3rem 0;
}

.product-div>li {
	padding-bottom: 3rem;
}

.news-list {
	padding: 2rem 0;
	margin-top: -3rem;
}

.news-list>ul>li {
	border-bottom: 1px solid #C8C8C8;
	margin-top: 3rem;
}

.news-list>ul>li>a {
	color: #000000;
	font-size: 3.5rem;
}

.date-div {
	font-size: 3rem;
}



</style>
<body>


<style type="text/css">
  
.nav-list {
  width: 90%;
  font-size: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 0;
}

.nav-list>li {
  padding: 2rem 0;
}

.nav-btn {
  width: 85%;
  background-color: #FBFDFF;
  border: 1px solid #E2E3E6;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 2rem;
}

</style>

<div id="header">
  <div class="header-bar">
    <?php echo ($webconfig['webname']); ?>
  </div>

  <div v-show="showNav" style="width: 100%; height: 1500rem; background-color: rgba(0,0,0, 0.6); position: fixed; left: 0; top: 0; z-index: 990">
    
  </div>

  <div v-show="showNav" style="position: fixed; width: 100%; height: 75rem; bottom: 25%; z-index: 991; overflow: hidden;">
    <a href="<?php echo U('Index/index');?>" style="color: #FFFFFF">
    <div id="nav1" class="nav-btn-div am-g">
      <div class="am-u-md-3 mobeil-nav-btn-div">
        <div class="<?php echo $activeArr['indexActive'] ? 'mobeil-nav-btn-active' : 'mobeil-nav-btn'; ?>">
          <img src="<?php echo $activeArr['indexActive'] ? '__PUBLIC__/img/index_active.png' : '__PUBLIC__/img/index.png'; ?>">
        </div>
      </div>
      <div class="am-u-md-9 nav-text">
          首页 
      </div>
    </div>
    </a>

    <a href="<?php echo U('Index/about');?>" style="color: #FFFFFF">
    <div id="nav2" class="nav-btn-div am-g">
      <div class="am-u-md-3 mobeil-nav-btn-div">
        <div class="<?php echo $activeArr['aboutUsActive'] ? 'mobeil-nav-btn-active' : 'mobeil-nav-btn'; ?>">
          <img src="<?php echo $activeArr['aboutUsActive'] ? '__PUBLIC__/img/person_active.png' : '__PUBLIC__/img/person.png'; ?>">
        </div>
      </div>
      <div class="am-u-md-9 nav-text">
          关于我们          
      </div>
    </div>
    </a>

    <a href="<?php echo U('Index/product');?>" style="color: #FFFFFF">
    <div id="nav3" class="nav-btn-div am-g">
      <div class="am-u-md-3 mobeil-nav-btn-div">
        <div class="<?php echo $activeArr['productActive'] ? 'mobeil-nav-btn-active' : 'mobeil-nav-btn'; ?>">
          <img src="<?php echo $activeArr['productActive'] ? '__PUBLIC__/img/product_active.png' : '__PUBLIC__/img/product.png'; ?>">
        </div>
      </div>
      <div class="am-u-md-9 nav-text">
        产品展示        
      </div>
    </div>
    </a>

    <a href="<?php echo U('Index/news');?>" style="color: #FFFFFF">
    <div id="nav4" class="nav-btn-div am-g">
      <div class="am-u-md-3 mobeil-nav-btn-div">
        <div class="<?php echo $activeArr['newsActive'] ? 'mobeil-nav-btn-active' : 'mobeil-nav-btn'; ?>">
          <img src="<?php echo $activeArr['newsActive'] ? '__PUBLIC__/img/news_active.png' : '__PUBLIC__/img/news.png'; ?>">
        </div>
      </div>
      <div class="am-u-md-9 nav-text">
        新闻动态      
      </div>
    </div>
    </a>

    <a href="<?php echo U('Index/telus');?>" style="color: #FFFFFF">
    <div id="nav5" class="nav-btn-div am-g">
      <div class="am-u-md-3 mobeil-nav-btn-div">
        <div class="<?php echo $activeArr['telUsActive'] ? 'mobeil-nav-btn-active' : 'mobeil-nav-btn'; ?>">
          <img src="<?php echo $activeArr['telUsActive'] ? '__PUBLIC__/img/telus_active.png' : '__PUBLIC__/img/telus.png'; ?>">
        </div>
      </div>
      <div class="am-u-md-9 nav-text">
        联系我们   
      </div>
    </div>
    </a>
  </div>
  

  <div class="menu-btn" @click = "clickNavBtn">
    <img :src="menuBtnImg">
  </div>
</div>

<script type="text/javascript">
new Vue({
  el: "#header",
  data: {
    showNav: false,
    menuBtnImg: "__PUBLIC__/img/menu.png",
    menuBtnSrc: "__PUBLIC__/img/menu.png",
    menuBtnCloseSrc: "__PUBLIC__/img/close.png",

  },
  methods: {
    clickNavBtn: function() {
      this.showNav = !this.showNav;
      if (this.showNav) {
        this.navAnimation()
        this.menuBtnImg = this.menuBtnCloseSrc
      } else {
        this.menuBtnImg = this.menuBtnSrc
      }
    },

    navAnimation: function() {
      let tl = new TimelineLite()
      tl
        .from("#nav1", 0.12, {y: "+500px"})
        .from("#nav2", 0.12, {y: "+500px"})
        .from("#nav3", 0.12, {y: "+500px"})
        .from("#nav4", 0.12, {y: "+500px"})
        .from("#nav5", 0.12, {y: "+500px"})
    }

  }
})
</script>



<div id="content">
	<div class="swiper-container">
		<div class="swiper-wrapper">
			<?php
 foreach($banner as $k => $v) { ?>
			<div class="swiper-slide" style="background-image:url(<?php echo ($v['images']); ?>)"></div>
			<?php	 } ?>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination"></div>
	</div>

	<div class="ceil-div">
		<ul class="am-avg-sm-2 am-avg-md-2 am-avg-lg-2 nav-list">
		  <li>
		  	<div class="nav-btn">
		  		<a href="<?php echo U('Index/about');?>">关于我们</a>
		  	</div>
		  </li>
		  <li>
		  	<div class="nav-btn">
		  		<a href="<?php echo U('Index/product');?>">产品展示</a>
		  	</div>
		  </li>
		  <li>
		  	<div class="nav-btn">
		  		<a href="<?php echo U('Index/news');?>">新闻资讯</a>
		  	</div>
		  </li>
		  <li>
		  	<div class="nav-btn">
		  		<a href="<?php echo U('Index/telus');?>">联系我们</a>
		  	</div>
		  </li>
		</ul>
	</div>

	<div class="ceil-div">
		<div class="ceil-title">
			关于我们
		</div>
		<div style="width: 96%; margin-left: auto; margin-right: auto;">
			<div style="float: left; width: 46%; margin-top: 3rem;">
				<img src="<?php echo ($about['img']); ?>" style="width: 96%; margin-left: auto; margin-right: auto;">
			</div>
			<div style="font-size: 3.5rem; margin: 0;"><?php echo ($about['content']); ?></div>
		</div>
	</div>


	<div class="ceil-div" style="padding-bottom: 0rem">
		<div class="ceil-title">
			产品展示
		</div>
		<ul class="am-avg-sm-2 am-avg-md-2 am-avg-lg-2 product-div">
			<?php
 for($i = 0; $i < 4; $i++) { $product = $products[$i]; ?>

			<li>
			  	<div style="width: 100%;">
			  		<a href="<?php echo U('Index/productPage?id='.$product['id']);?>">
			  		<div style="width: 90%; margin-left: auto; margin-right: auto;">
			  			<img src="<?php echo ($product['images']); ?>" style="width: 100%;">
			  			<div style="text-align: center; color: #000000"><?php echo ($product['title']); ?></div>
			  		</div>
			  		</a>
			  	</div>
			  </li>

			<?php
 } ?>

		</ul>
	</div>


	<div class="ceil-div" style="padding-bottom: 0rem">
		<div class="ceil-title">
			我们的优势
		</div>

		<?php
 for ($i = 0; $i < 3; $i++) { $advantage = $advantages[$i]; $advantage['desc'] = html_entity_decode($advantage['desc']); ?>

  		<div style="padding-bottom: 3rem;">
			<div style="width: 96%; margin-left: auto; margin-right: auto;">
				<div style="float: left; width: 46%; margin-top: 3rem;">
					<img src="__PUBLIC__/img/advantage.png" style="width: 96%; margin-left: auto; margin-right: auto;">
				</div>
				<div style="font-size: 4.5rem; font-weight: 25; margin: 0;"><?php echo ($advantage['title']); ?></div>
				<div style="font-size: 3.5rem; margin: 0;"><?php echo ($advantage['desc']); ?></div>
			</div>
		</div>

  		<?php
 } ?>	
	</div>


	<div class="ceil-div" style="padding-bottom: 0rem">
		<div class="am-g">
			<div class="am-u-md-9">
				<div class="ceil-title">
					新闻动态
				</div>
			</div>
			<div class="am-u-md-3">
				<nav class="am-titlebar-nav">
			        <a href="<?php echo U('Index/news');?>" style="font-size: 4rem; color: #4992FF">more &raquo;</a>
			    </nav>
			</div>
		</div>


		<div class="news-list">
			<ul>
				<?php
 foreach($news as $key=>$val){ ?>

		  		<li>
				  <a href="<?php echo U('Index/newsPage?id='.$val['id']);?>">
				  	<div>
					  	<?php echo ($val['title']); ?>
					  <div class="am-g">
					  	<div class="am-u-md-10 date-div" style="padding: 0"><?php echo ($val['date']); ?></div>
					  	<div class="am-u-md-2" style="font-size: 5rem; margin-top: -3rem; color: #C8C8C8; text-align: right;">&raquo;</div>
					  </div>
					</div>
				  </a>
				</li>

		  		<?php
 } ?>
			</ul>
		</div>
	</div>


</div>

<div id="footer">
  
  <div data-am-widget="gotop" class="am-gotop am-gotop-default">
    <a href="#top" title="回到顶部" style="width: 100%; font-size: 3.5rem; background-color: #3285FF">
      <span class="am-gotop-title">回到顶部</span>
      <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
  </div>

  <div style="padding: 5rem 0; font-size: 3.5rem; color: #999999; background-color: #E9F1FF">
    <div style="text-align: center;">
      ©2018 网站模板—Leil版权所有
    </div>
    <div style="text-align: center;">
      手机版 |本站使用凡科建站搭建 | 管理登录
    </div>
  </div>

</div>


</body>

<script type="text/javascript">

var swiper = new Swiper('.swiper-container', {
	pagination: {
		el: '.swiper-pagination',
	},
	autoplay: {
		delay: 4000,
	}
});







</script>
</html>